<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout">
<head>
<title>文章列表管理</title>
<script type="text/javascript">
/* function checkTitle(){
	var obj = document.getElementById("title");
    var valueTitle = obj.value;    
    var sort = document.getElementById("sortOrder");
    var sortValue = sort.value;
	if(valueTitle =="" || valueTitle.trim()==""){
		alert("文章标题不能为空！");	
		//history.go(0);
	}
  if(sortValue=="" || sortValue.trim()==""){
		alert("排序不能为空！");
	}
} */
//function withoutUrl(){
	
//}
function chenckUrl(){
	var obj = document.getElementById("fileUrl");
    var valueUrl = obj.value;
    if(valueUrl){
    	var  urlStart = valueUrl.indexOf("http://");
    	var urlStart2 = valueUrl.indexOf("/");
    	if(urlStart==0 || urlStart2==0){
           if(!/\.(gif|jpg|jpeg|png)$/i.test(valueUrl)){
    	          alert("图片类型必须是.gif,jpeg,jpg,png中的一种");  
    	          $("#fileUrl").val("");  
    	   }		
    	}else{
    		alert("图片的路径不合格！");
    		 $("#fileUrl").val("");  
    	}
    }
	
}

function fileChange(imgType) {
	
if(!/\.(gif|jpg|jpeg|png)$/i.test(imgType.value)){
          alert("图片类型必须是.gif,jpeg,jpg,png中的一种");  
          $("#uploadfile").val("");  
}else{ 
    var fileSize = 0;  
    if (!imgType.files) {
        //var filePath = target.value;
        var fileSystem = new ActiveXObject("Scripting.FileSystemObject");   
        var file = fileSystem.GetFile(imgType.value);
        fileSize = file.Size; alert(fileSize);
    } else {
        fileSize = imgType.files[0].size;
    }

    if(fileSize == 0 || fileSize >=5120000){
    	alert("文件大小不能为0，或者大于5MB");
    	$("#uploadfile").val("");  
         
    }
}

}




	

$(document).ready(function(){
	$('#treebutton').html($("#selt_categoryType").find("option:selected").text() + '<i class="fa fa-angle-down"></i>');
	$("#selt_categoryType").change(function(){$('#treebutton').html($("#selt_categoryType").find("option:selected").text() + '<i class="fa fa-angle-down"></i>'); });
	if($.browser.mozilla){
		Metronic.alert({'message':'<span style="color:red;">请使用谷歌或者IE浏览器进行多文件的上传，火狐浏览器暂不支持!</span>'});
	}
$("#form_articleEdit").validate({
    rules:{
    	title:{  //标题长度不能超过 100个字符
            required:true,
            maxlength:100
        },

        sortOrder:{  //整数  最大为254，最小为0   
        	required:true,
            digits:true,  
            range:[0,254]     
        },
        keywords:{  //文章  关键字  长度不能超过 100个字符
            maxlength:100
        },
        link:{
        	maxlength:200,
        	url:true,
        },
        
       /*  uploadfile:{
        	leastone:["fileUrl"],
        }, */ 
        fileUrl:{  //或输图片网址 长度不能超过200个字符
       	   maxlength:200 	
        },
        
        description:{  //文章  描述  长度不能超过 300个字符  
            maxlength:300   
        },
    },
    messages:{
    	title:{
            required:"请输文章标题",
            maxlength:"最大不能超过100个字符"
        },
        sortOrder:{
            required:"请输入文章排序",
            maxlength:"最大值不能超过254"
        },
        keywords:{
            required:"请输入文章关键词",
            maxlength:"最大不能超过100个字符"
        },
        link:{
        	 required:"外部链接填写不正确！",
        },
        description:{
            maxlength:"最大不能超过300个字符"
        }

    }
});

})

/*  jQuery.validator.addMethod("leastone", function() {
    	    return $("#uploadfile").val()!="" || $("#fileUrl").val()!="";  	    
      }, "选择图片上传与填写图片网址必须一个有值！" );   */

</script>
</head>
<body>
<div layout:fragment="content">
<link th:href="@{/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css}" rel="stylesheet" href="plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css"/>
<link th:href="@{/plugins/bootstrap-modal/css/bootstrap-modal.css}" rel="stylesheet" href="plugins/bootstrap-modal/css/bootstrap-modal.css"/>

<!--Modal begin  分类修改-->
	<div id="tree_modal" class="modal fade">
		<div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button></div>
	    <div class="modal-body">
			<div class="row">

			</div>
		</div><!--Modal body-->
		<div class="modal-footer">
			<a href="#" class="btn" data-dismiss="modal" >关闭</a>
		</div><!--Modal footer-->
	</div>
<!--Modal end-->

	<div class="row">
		<div class="col-md-12">
			<div class="btn-group pull-right">
				<a href="index.html" th:href="@{/article/list/index/}" id="sample_editable_1_new" class="btn green">返回<i class="fa fa-arrow-circle-o-left"></i></a>
			</div>
		</div>
	</div>
	 
	<div class="row">
		<div class="col-md-12">
			<div class="form">
				<form role="form"  id="form_articleEdit" th:action="@{/article/list/save}" th:object="${articleList}" method="post" class="form-horizontal" enctype="multipart/form-data">
					<h4 class="form-section">添加文章</h4>
					<input type="hidden" th:field="*{id}" id="categoryId"/>
					<div class="form-body">
						
						<div class="form-group" th:class="${#fields.hasErrors('title')}? 'form-group has-error' : 'form-group'">
							<label class="control-label col-md-3">文章标题<span class="required" aria-required="true">* </span></label>							
							<div class="col-md-4">
								<input type="text" class="form-control"  id="title" name="title" placeholder="文章标题" th:field="*{title}" />
								<span class="help-block" th:if="${#fields.hasErrors('title')}" th:errors="*{title}">文章标题不能为空</span>
							</div>
						</div>		
						
						<div class="form-group" th:class="${#fields.hasErrors('catId')}? 'form-group has-error' : 'form-group'">
							<label class="control-label col-md-3">上级分类 <span class="required" aria-required="true">* </span></label>
							<div class="col-md-4">  
					            <select style="display:none" id="selt_categoryType" name="selt_categoryType"  th:field="*{catId}" th:remove="all-but-first" class="form-control">              
					                <option style="display:none" th:each="eachValue : ${cateParents}" th:value="${eachValue.id}" th:text="${eachValue.name}">
					                </option>
					              
					            </select>	
					            <button id="treebutton" class="btn btn-default dropdown-toggle" type="button"  data-toggle="dropdown">
									分类 <i class="fa fa-angle-down"></i>
								</button>
								<div class="dropdown-menu dropdown-content input-large">
									<div id="category_tree" role="menu"></div>
								</div>											
							</div>
						</div>																			
							
						
						<div class="form-group" >
							<label class="control-label col-md-3">文章重要性<span class="required" aria-required="true"></span></label>
							<div class="col-md-4">
								<div class="radio-list">
									<label class="radio-inline"><span><input type="radio" name="articleType"  id="optionsRadios4" value="0"  checked="checked"  th:field="*{articleType}" /></span> 普通</label>
									<label class="radio-inline"><span><input type="radio" name="articleType" id="optionsRadios5" value="1"    th:field="*{articleType}" /></span> 置顶</label>
								</div>						
							</div>
						</div>	
						
						<div class="form-group" >
							<label class="control-label col-md-3">是否显示<span class="required" aria-required="true"></span></label>
							<div class="col-md-4">
								<div class="radio-list">
									<label class="radio-inline"><span><input type="radio" name="isShow"  id="optionsRadios4" value="1"  checked="checked"  th:field="*{displayed}" /></span> 显示</label>
									<label class="radio-inline"><span><input type="radio" name="isShow" id="optionsRadios5" value="0"    th:field="*{displayed}" /></span> 不显示</label>
								</div>						
							</div>
						</div>
						
						<div class="form-group" th:class="${#fields.hasErrors('sortOrder')}? 'form-group has-error' : 'form-group'">
							<label class="control-label col-md-3">排序<span class="required" aria-required="true">* </span></label>
							<div class="col-md-4">
								<input type="text"   id="sortOrder" name="sortOrder" class="form-control" placeholder="显示顺序" th:field="*{sortOrder}" />
								<span class="help-block" th:if="${#fields.hasErrors('sortOrder')}" th:errors="*{sortOrder}">必须填写显示顺序</span>
							</div>
						</div>
						
							
					
						<div class="form-group">
 						    <label class="control-label col-md-3">关键字 <span class="required" aria-required="true"> </span></label>
							<div class="col-md-4">
								<input type="text" class="form-control" name="keywords" id="keywords" placeholder=" " th:field="*{keywords}" />
								
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-3">网页描述 <span class="required" aria-required="true"></span></label>
							<div class="col-md-4">
								<textarea class="form-control" rows="3" placeholder="网页描述" id="textarea_description" name="textarea_description"  th:field="*{description}"></textarea>
							</div>
						</div>
					
						
						<div class="form-group">
							<label class="control-label col-md-3">内容</label>
							<div class="col-md-4">
								<textarea id="textarea_content" rows="4" type="text"
									class="form-control" placeholder="内容" th:field="*{content}"></textarea>
							</div>
						</div>
							
					    <div class="form-group">
 						    <label class="control-label col-md-3">外部链接 </label>
							<div class="col-md-4">
								<input type="text" class="form-control" name="link" id="link" placeholder=" " th:field="*{link}" />
								
							</div>
						</div>
						 
						 <div class="form-group">
 						    <label class="control-label col-md-3">上传图片</label>
							<div class="col-md-4">
								<input type="file"  onchange="fileChange(this);" class="form-control" name="uploadfile"  id="uploadfile"/>		
								
							</div>
							
							
							<div class="col-md-4">
							  <!--  <label class="control-label col-md-3">或输入文件地址</label> onBlur="chenckUrl();"--> 
							    <input type="text" onChange="chenckUrl();"  placeholder="或输入图片网址 http://(/xxx/)"  class="form-control" name="fileUrl" id="fileUrl"  th:field="*{fileUrl}" />
						    </div>
						  
						    <div class="col-md-offset-3 col-md-9"> <font color='#FF0000'>  选择上传图片 与 输入图片网址只能一个有值（二选一）</font></div>
						    
						 </div>
					
						 
						
						 
						 
						 
					</div>
						
					<div class="form-actions fluid">
						<div class="col-md-offset-3 col-md-9">
							<button type="submit" name="btn_submit" id="btn_submit" class="btn blue">提交</button>
							
 						</div>
					</div>
				</form>		
			</div>
		</div>
	</div>
</div>	
 
</body>
</html>
<script th:src="@{/plugins/jstree/dist/jstree.min.js}" src="plugins/jstree/dist/jstree.min.js" type="text/javascript"></script>
<script th:inline="javascript">
/*<![CDATA[*/
	
	    $('#category_tree').jstree({
            "core" : {
                'data' : {'url' : function (node) {return '/tree/categoryArticle';}}
            }
        });
        
	    $('#category_tree').on('select_node.jstree', function(e,data) {  
	    	$("#selt_categoryType option").each(function() { this.selected = (this.value == data.node.id); });
	    	$("#selt_categoryType").change();
	  	    $("#tree_modal").modal('hide');	
	    }); 
	    
	    var result;
	    function getCategoryById(id,categories){   	
	    	$(categories).each(function() { 
	    		if(this.id == id)result = this; 
	    		console.log(this.id);
		    	if(result){
		    		console.log('find it' + result);
		    		return result;
		    	}else{
		    		console.log('not find ,try sub cat' + result);
		    		result = getCategoryById(id,this.children);
		    		return result;
		    	}
	    	});
			return result;
	    }
	    
	    function addSubCategoriesToArray(category,array){
	    	//console.log(category.children);
	    	if(category.children){
		    	$(category.children).each(function() {
		    		console.log(this);
		    		array[array.length] = this.id;	 
		    		console.log(this.children);   		
		    		if(this.children)addSubCategoriesToArray(this.children,array);
		    	});
	    	}
	    }	    
	 
   
KindEditor.ready(function(K) {
	var editor = K.create('#textarea_content', {
		uploadJson : '/upload/ARTICLES',
		allowFileManager : false
	});
	editor.clickToolbar('multiimage',function(){
 	   if($.browser.mozilla){
 		   editor.hideDialog();
 		   alert('请使用谷歌或者IE浏览器进行多文件的上传，火狐浏览器暂不支持!');
 		   return false;
 	   }
    });
});


$("#btn_submit").click(function(){
  var a = $("#uploadfile").val();
  var b = $("#fileUrl").val();

  if(a && b){
	alert("选择图片上传 与填写图片网址只能一个有值！");
	$("#uploadfile").val("");
	$("#fileUrl").val("");
	return false;
  } else{
	$("#formid").submit(); 
  }
	 
	 
});

/*]]>*/
</script>	
